window.addEventListener("load",function() {
    var header_message = document.querySelector('.header_message');
    var ul =document.querySelector('.ul');
    var circle = document.querySelector('.circle');
    function animate (obj,target,callback) {
        // 当我们不断点击按钮 元素的移动速度会加快 这是因为开启了多个定时器 解决办法为 删除原来的定时器 只保留一个
        clearInterval(obj.begin);
        // 缓动动画的原理:
        // 1.让盒子移动的距离慢慢变小,速度就会慢慢落下来
        // 2.核心算法：（目标值 - 现在的距离）/10
        // 3.停止的条件：让盒子的目标值等于当前的位置就停止计时器
        obj.begin = setInterval(function() {
            var step = (target - obj.offsetLeft) / 10 ;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 回调函数写到 定时器结束的位置
            clearInterval(obj.begin);
            if (callback) {
                // 调用函数
                callback();
            }
        }
        else {
            // 将步长值改为整数 就避免了不到指定位置的 问题
            obj.style.left =obj.offsetLeft + step +'px';
        }  
    }, 50);
    }
    // 小圆点
    for(var i=0; i<circle.children.length; i++)
    {
        circle.children[i].addEventListener('click',function() {
            for(var i =0; i<circle.children.length; i++) {
                circle.children[i].className = '';
            }
            this.className = 'white';
            // 获得li的index值
            var index = this.getAttribute('index');
            console.log(index);

            num = index;
            circle_num = index;

            // 图片移动
            var move = -index * 1536;
            animate(ul,move);
        })

        
    }

    // 第一个小圆点加背景
    circle.children[0].className = 'white';


    // 点击事件
    var num = 0; //记录 当时照片的 序号
    var circle_num = 0; // 记录 当时 小圆圈的序号
    // 克隆一个li 里面放上第一张 照片 然后 点击的时候 立刻回到第一张 
    var first = ul.children[0].cloneNode(true);
    //插入ul中
    ul.appendChild(first);
    // 节流阀  防止点击过程从 移动太快
    var flag = true;
    function click() {
        if(flag) {
            flag = false;
                // 判断 当到最后一张图片是 立刻回到第一张
            if(num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
        } 
        num++;
        var move_left = -num * 1536;
        animate(ul,move_left,function() {
            flag = true;
        });





        // 当图片移动时  小圆圈要随着动  
        circle_num++;
        if (circle_num == ul.children.length - 1) {
            circle_num = 0;
        }
        
        for(var i =0; i<circle.children.length; i++) {
            circle.children[i].className = '';
        }
        circle.children[circle_num].className = 'white';
        }
    }
    // 自动播放
    var timer =setInterval(function(){
        click();
    },2000);

    header_message.addEventListener('mouseleave',function() {
        timer = setInterval(function() {
           click();
       }, 2000);
     })
     header_message.addEventListener('mousemove',function() {
       clearInterval(timer);
       timer =null;
     })
})